/*
 * @Author: ZARR 
 * @Date: 2018-03-30 10:10:46 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-07-02 15:08:10
 * @作用: 首页详情页 
 */

<template>
<div class="index">
  <Banner :isMobile="isMobile"></Banner>
  <h1>斯威普 - 防水无人机开拓者</h1>
  <div class="icon-jiantouarrowheads3 iconfont"></div>
  <div class="Highlights">
    <div class="container"
    @touchstart.stop="touchStart"
    @touchmove.stop="touchMove"
    @touchend.stop="touchEnd" 
    :class="page == 0 ? 'selectPageZero' : (page == 1 ? 'selectPageOne' : 'selectPageTwo') ">
      <div class="item" v-for="(light, index) in Highlights" :key="index">
        <img :src="light.img" :alt="light.alt">
        <p class="title">{{light.alt}}</p>
        <a class="url" :href="light.url">
          <h2>{{light.hContent}}</h2>
        </a>
      </div>
    </div>
  </div>
  <div class="otherModule">
     <div class="container">
       <div class="item first">
          <img src="https://cdn.swellpro.cn/index/buy.jpg" alt="">
          <div class="text">
             <p class="head">
               线下购买地址
             </p>
          </div>
       </div>
       <div class="item">
         <div class="imgContent">
           <img src="https://cdn.swellpro.cn/index/service.jpg" class="top" alt="">
           <div class="text">
             <p class="head">
              客户服务
             </p>
           </div>
         </div>
         <div class="imgContent">
           <img src="https://cdn.swellpro.cn/index/solutions.jpg" alt="">
           <div class="text">
             <p class="head">
               无人机解决方案
             </p>
          </div>
         </div>
       </div>
     </div>
  </div>
  <div class="nb">
    <div class="container">
      <div class="item">
         新闻
         <img src="https://cdn.swellpro.cn/index/icon.png" alt="">
      </div>
      <div class="item">
         博客
         <img src="https://cdn.swellpro.cn/index/icon.png" alt="">
      </div>
    </div>
  </div>
  <div class="why">
     <div class="container">
       <p class="title">你为什么需要防水无人机？</p>
       <div class="btn minScreen" @click="open" :class="{'hideBtn': hideOpen}">
         了解更多
       </div>
       <div class="hide" :class="{'hideOpen': hideOpen}">
        <p>
          虽然地球有70%的地方被水覆盖，但是人们却很难在水上和周围操作无人机。当普通的无人机在水上飞行遇到电池耗尽，失去信号或失控等情况时，无人机就会掉入水里，即使你找到了溺水的机身，维修也是极其昂贵和困难。无人机故障可能是由飞手操作失误、飞机故障和其它许多无法控制的原因，就算有多年的飞行经验也很难保证万无一失。
        </p>
        <p>
          无人机从船上起飞并降落不是件容易的事。即使没有碰撞，空气中的水分和盐分也会损坏无人机内部零件。特别在湿度高的地区，普通的无人机会变得毫无用处，潮湿环境会使水分渗入无人机内部，缩短使用寿命。
        </p>
        <p>
          为了解决这些问题，2013 年斯威普团队发明了水手系列的无人机，并能实现完全防水的无人机。水手1代拥有防水机身，防水电机，挂载GoPro防水相机。它可以浮在水面，甚至可以在水下拍摄。2015年水手2发布，相对于一代产品有了全面的更新和升级，并设计研发了防水云台。
        </p>
        <p>
          最新的防水无人机水手3，上天下海无所不能。一体化设计的防水4K云台相机，不仅可以航拍出高品质照片和视频，还能利用投放装置精准投递鱼饵。
        </p>
        <div class="btn minScreen" @click="close">
           关闭
        </div>
       </div>
     </div>
  </div>
  <div class="media">
     <div class="container">
        <img src="https://cdn.swellpro.cn/index/media.jpg" alt="">
     </div>
  </div>
</div>
</template>

<script>
import Banner from  '~/components/Banner'
import {chectIsMobile} from '~/assets/util'
export default {
    layout: 'main',
    head() {
    	return {
    		title: '防水无人机开拓者 — 深圳市斯威普科技有限公司',
    		meta: [
    	   		{ hid: 'description', name: 'description', content: '斯威普水手3防水无人机可以实现高清航拍和投递鱼饵' },{ hid: 'keywords', name: 'keywords', content: '斯威普' }
    		]
    	}
    },
    data(){
    	return {
            isMobile: false,
            Highlights: [
              {img:'https://cdn.swellpro.cn/item1.jpg',alt:'专业航拍',url:'https://www.swellpro.cn/waterproof-splash-drone-3-auto.html',hContent:'水手三旗舰版>'},
              {img:'https://cdn.swellpro.cn/item2.jpg',alt:'无人机钓鱼',url:'',hContent:'水手三钓鱼版>'},
              {img:'https://cdn.swellpro.cn/item3.jpg',alt:'运动拍摄',url:'',hContent:'防水穿越系列>'}
            ],
            pot:{},
            start:false,
            move:false,
            page:0,
            hideOpen: false
    	}
    },
    components:{
    	Banner
    },
    mounted(){
       if(chectIsMobile())
       this.isMobile = true;
    },
    methods:{
       touchStart(e){
          this.pot = {};
          this.pot.pageX = e.targetTouches[0].pageX;
       },
       touchMove(e){
          this.pot.distance = e.targetTouches[0].pageX - this.pot.pageX;
       },
       touchEnd(e){
          if(this.pot.distance > 50 && this.page != 0){
                this.page--;
          }else if(this.pot.distance < -50 && this.page != 2){
                this.page++;
          }else{
             return ;
          }
       },
       open(){
          this.hideOpen = true;
       },
       close(){
          this.hideOpen = false;
       }
    }
    

}
</script>

<style lang="stylus" scope>
.index
  font-weight 100
  overflow hidden
  .icon-jiantouarrowheads3
    font-size 35px
    text-align center
    margin-bottom 30px
    transform rotate(270deg)
img
  display block
h1
  text-align center
  font-size 28px
  font-weight 400
  padding 30px 0
.Highlights
  >.container
    display flex
    justify-content space-between
    .item
      flex 0 0 32.5%
      text-align center
      background #333
      color #fff
      >img
        width 100%
        display block
      a
        display block
        h2
          color #0d85f1
          font-weight 100
          padding-bottom 45px
          font-size 18px
      .title
        font-size 22px
        padding 30px 0
.otherModule
  padding 40px 0 20px
  >.container
    display flex
    flex-flow row wrap
    justify-content space-between
    .item
      flex 0 0 49.5%
      position relative
      .imgContent
        position relative
        width 100%
        >img
          width 100%
        >.top
          margin-bottom 14px
      .text
        position absolute
        bottom 30px
        text-align center
        width 100%
        color #fff
        .head
          font-size 25px
          font-weight 400
          padding-top 0px
        p
          font-size 16px
          font-weight 100
          padding-top 30px
      .news
        margin-top 30px
    .first
      img
        height 577px
.nb
  padding-bottom 40px
  >.container
    display flex
    flex-flow row wrap
    justify-content space-between
    .item
      flex 0 0 49.5%
      width 100%
      height 60px
      background #1f2024
      text-align center
      color #fff
      line-height 60px
      font-size 30px
      margin-bottom 15px
      >img
        float right
        width 30px
        position relative
        right 20px
        top 15px
.why
  background-size cover
  background-position center
  background-repeat no-repeat
  height 600px
  background-image url('https://cdn.swellpro.cn/index/swim.jpg')
  width 100%
  padding-top 75px
  overflow hidden
  box-sizing border-box
  >.container
    color #000
    .title
      font-size 28px
      font-weight 400
    p
      margin-bottom 50px
      font-size 16px
    .btn
      width 200px
      height 50px
      background #000
      margin 0 auto
      border-radius 20px
      color #fff
      line-height 50px
      margin-bottom 30px
      text-align center
      overflow hidden
      transition all .3s
      max-height 100px
      font-size 18px
    .hideBtn
      max-height 0px
.media
  background #1f1f1f  
  >.container
    img
      width 100%
      
@media (max-width 600px)
  h1
    font-size 18px
    font-weight 100
  .Highlights
    width 100%
    overflow hidden
    >.container
      display block
      width 300%
      transition all .3s
      .item
        display inline-block
        width 30%
        margin-right 15px
    .selectPageZero
      transform translateX(0px)
    .selectPageOne
      transform translateX(-30%)
    .selectPageTwo
      transform translateX(-60%)
  .otherModule
    >.container
      padding 0px
      .item
        flex 0 0 100%
        .text
          bottom 15px
          .head
            font-weight 100
        .imgContent
         >.top
           margin-bottom 0px
      .first
        img
          width 100%
          height auto
  .nb
    padding-bottom 5px
    >.container
      .item
        flex 0 0 100%
  .why
    height auto
    background none
    padding-top 0px
    >.container
      .title
        font-size 20px
        text-align center
        font-weight 100
      p
        margin-bottom 20px
      .hide
        overflow hidden
        max-height 0px
        transition all .3s
      .hideOpen
        max-height 1000px
</style>
